<template>
    <el-button type="primary" @click="addGroup(null, 1)">添加组</el-button>
    <el-tree
        :data="groupData"
        default-expand-all
        :props="defaultProps"
        >
        <template #default="{ node, data }">
            <span class="custom-tree-node">
            <span>{{ node.label }}</span>
            <span v-if="data.type==1">
                <a @click="addGroup(data, 1)"> 添加下层 </a>
            </span>
            <span v-if="data.type==1 && data.parentId == 0">
                <a @click="addGroup(data, 2)"> 添加组织 </a>
            </span>
            <span v-if="data.type==1">
                <a @click="addGroup(data, 3)"> 添加用户 </a>
            </span>
            </span>
        </template>
        </el-tree>
    <el-dialog
            v-model="dialogVisible"
            v-if="dialogVisible"
            :title="parentGroup == null? '':parentGroup.name"
            width="30%"
        >
      
          <div v-if="formType == 1">
            <el-input v-model="formName" placeholder="名称" />
          </div>
          <div v-if="formType == 3">
            <el-input v-model="formId" placeholder="员工ID" />
          </div>
          <div v-if="formType == 2">
            <el-input v-model="formOrgId" placeholder="组织ID" />
          </div>

            <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="sendGroup">
                提交
                </el-button>
            </span>
            </template>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import httpRequest from '@/request/index'

const parentGroup = ref()
const groupData = ref([])
const dialogVisible = ref(false)

const formName = ref('')
const formOrgId = ref()
const formId = ref()
const formType = ref()

onMounted(() => {
  loadGroupData()
})

function addGroup(group, type) {

  if (group != null) {
    parentGroup.value = group
  }

  formName.value = ''
  formId.value = ''
  formOrgId.value = ''
  dialogVisible.value = true
  formType.value = type
}

function sendGroup() {

  if (formType.value == 1) {
    httpRequest({
        url: '/auth/group/add',
        method: 'post',
        data: {
          name: formName.value,
          parentId: parentGroup.value ? parentGroup.value.groupId:0
        }
    }).then((res) => {
        if (res.code === 0) {
          dialogVisible.value = false
          loadGroupData()
        }
    })
  } else if (formType.value == 2){
    httpRequest({
        url: '/auth/group/add/organize',
        method: 'post',
        data: {
          groupId: parentGroup.value.groupId,
          organizeId: formOrgId.value
        }
    }).then((res) => {
        if (res.code === 0) {
          dialogVisible.value = false
          loadGroupData()
        }
    })
  } else {
    httpRequest({
        url: '/auth/group/add/user',
        method: 'post',
        data: {
          uid: formId.value,
          parentId: parentGroup.value.groupId
        }
    }).then((res) => {
        if (res.code === 0) {
          dialogVisible.value = false
          loadGroupData()
        }
    })
  }


}

function loadGroupData() {
  httpRequest({
        url: '/auth/group/all',
        method: 'get',
    }).then((res) => {
        if (res.code === 0) {
          groupData.value = res.data
        }
    })
}

const defaultProps = {
  children: 'children',
  label: 'name',
}

</script>

<style scoped>

</style>
